<template>
  <div>
    <div v-if="data.length == 0">暂无数据，快去发布新的文章吧~</div>
    <div v-for="item in data" class="comment-item">
      <Line />
      <div class="userAvatar">
        <img
          :src="item.user.avatar"
          class="avatar"
          @click.stop="$router.push(`/user/profile/${item.user.id}`)"
        />
        <div style="font-size: 22px">
          <span class="username">{{ item.user.name }}</span
          >付费阅读了你的文章
          <span
            class="articleTitle"
            @click="$router.push(`/article/detail/${item.article.id}`)"
            >《{{ item.article.title }}》</span
          >
        </div>
        <span style="margin-left: auto; color: #969696" class="createAt">{{
          item.createAt
        }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import Line from "@/components/Line.vue";
import { ref } from "vue";
import { getPaymentList } from "@/api/users";
import { useUserStore } from "@/stores/userStore.js";
const data = ref([]);
const getData = () => {
  getPaymentList({
    userId: useUserStore().userInfo.id,
  }).then((res) => {
    data.value = res.data.data.records;
  });
};
getData();
</script>

<style scoped lang="less">
.userAvatar {
  display: flex;
  align-items: center;
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 20px;
  }
}
.username {
  margin-right: 20px;
  font-weight: 400;
}
.articleTitle {
  color: #3194d0;
  cursor: pointer;
}
.content {
  padding: 20px 0;
  //   color: #969696;
}
</style>
